<template>
  <MrCustom bg-color="bg-gradual-blue" is-back/>
  <view v-if="numItem">
    <view class="bg-white padding">
      <view class="flex flex-sub justify-between align-center">
        <view class="text-blue">{{ numItem.name }}</view>
      </view>
      <view class="text-lg text-gray margin-top-xs">
        {{ numItem.desc }}
      </view>
    </view>

    <view style="padding-bottom: 10vh">
      <view v-for="(item,index) in numItem.value" :key="index">
        <view class="bg-white margin-top padding">
          <MrCheckBox v-model:value="archiveInfo[item.key]"
                      :options="item.options"
                      :title="item.title"
                      :desc="item.desc"></MrCheckBox>
        </view>
      </view>
      <view class="cu-bar foot bg-white padding-lr">
        <view class="flex flex-sub justify-between">
          <view class="flex flex-sub flex-direction">
            <button class="cu-btn bg-blue light lg radius" @click="cancel">取消</button>
          </view>
          <view class="flex flex-sub flex-direction">
            <button class="cu-btn bg-blue lg radius" @click="submit">保存</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import MrCustom from "@/components/common/MrCustom.vue";
import MrCheckBox from "@/components/common/MrCheckBox.vue";
import api from "@/api";

const archiveInfo = ref()
const numItem = ref()

onLoad((option) => {
  archiveInfo.value = JSON.parse(decodeURIComponent(option.archiveInfo))
  numItem.value = JSON.parse(decodeURIComponent(option.numItem))
})

const submit = () => {
  api.archive.setHealth({
    ...archiveInfo.value
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.navigateBack({
        delta:2,
        success: () => {
          uni.showToast({
            title: res.data.msg
          })
        }
      })
    }
  })
}
const cancel = () => {
  uni.navigateBack({
    delta:2,
  })
}

</script>

<style scoped>

</style>